@extends('shop.app')
@section('content')
<!--<div class="thumbnail">
    <img id="zoom_img" src="{{$img}}" alt="" data-zoom-image="/img/large/image1.jpg">
</div>
<div >
    @for ($i = 0; $i < 4; $i++)
    <div class="thumbnail col-md-3">
        <img data-hover="/img/product_04b.jpg" src="{{$img}}" alt="">
    </div>
    @endfor
</div>-->
<!-- START CONTENT ITEM -->
<div class="row">
    <div class="col-xs-9">
        <h2>Product name</h2>
    </div>
    <div class="col-xs-3">
        <div class="social-icons pull-right">
            <a href="#"><img src="/img/icon-facebook-like.jpg"></a>
            <!-- Replace with something like:
            <div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="arial">
                <span style="height: 20px; width: 107px; ">
                    <iframe id="f36680bf28" name="f1bd6447bc" scrolling="no" style="border: none; overflow: hidden; height: 20px; width: 107px; " title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php"></iframe>
                </span>
            </div>
            -->
        </div>
    </div>
</div>
<!-- END CONTENT ITEM -->

<div class="row product-detail">

    <div class="col-xs-12 col-sm-5 col-md-4">

        <!-- START CONTENT ITEM -->
        <a class="product-detail-lightbox colorbox" rel="colorbox1" href="{{$img}}" title="Product A"><img class="product-image img-responsive" alt="Product A" src="{{$img}}"></a>
        <!-- END CONTENT ITEM -->

    </div>

    <div class="hidden-xs col-sm-2 col-md-1">

        <!-- START CONTENT ITEM -->
        <div class="row">
            <div class="col-sm-6 col-md-12 visible-xs">
                <a rel="colorbox1" href="/img/product_01.jpg" class="colorbox thumbnail">
                    <img alt="Product A 2" src="/img/product_01.jpg" class="img-responsive">
                </a>
            </div>
            <div class="col-xs-12">
                <a rel="colorbox1" href="/img/product_01b.jpg" class="colorbox thumbnail">
                    <img alt="Product A 2" src="img/product_01b.jpg" class="img-responsive">
                </a>
            </div>
            <div class="col-xs-12">
                <a rel="colorbox1" href="img/product_02.jpg" class="colorbox thumbnail">
                    <img alt="Product B 1" src="img/product_02.jpg" class="img-responsive">
                </a>
            </div>
            <div class="col-xs-12">
                <a rel="colorbox1" href="img/product_02b.jpg" class="colorbox thumbnail">
                    <img alt="Product B 2" src="img/product_02b.jpg" class="img-responsive">
                </a>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>

    <div class="col-xs-12 col-sm-5 col-md-7">

        <!-- START CONTENT ITEM -->
        <div class="well">
            <div class="row">
                <div class="col-xs-6 col-sm-5 col-md-7">
                    <strong>Brand:</strong> <span>Squeezer</span><br>
                    <strong>Model:</strong> <span>Duck</span><br>
                    <strong>Size:</strong> <span>7</span><br>
                    <strong>Color</strong> <span>Yellow</span><br>
                    <strong>Quality:</strong> <span>new</span><br>
                </div>
                <div class="col-xs-6 col-sm-7 col-md-5">
                    <span class="label label-important price">&euro; 0,50</span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h3>Description</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus, nisl nec volutpat pretium, tellus lectus condimentum leo, non facilisis tortor sapien a lectus.</p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-xs-12 col-md-3">
                    <a class="btn btn-block btn-default"><span class="glyphicon glyphicon-chevron-left"></span> Back</a>
                </div>
                <div class="col-xs-12 col-md-6">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="count" class="col-xs-12 col-sm-3 col-md-3 col-lg-2 control-label">Count</label>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
                                <select class="form-control">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-xs-12 col-md-3">
                    <a class="btn btn-block btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Order now</a>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>
</div>


<div class="row">
    <div class="col-xs-12">

        <!-- START CONTENT ITEM -->
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Parts</a></li>
                <li><a href="#tab2" data-toggle="tab">Comparable products</a></li>
            </ul>
            <div class="tab-content">
                <div class="row tab-pane active" id="tab1">
                    <ul class="thumbnails product-list-inline-small">
                        <li class="col-xs-12 col-sm-3 col-md-2">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="/img/product_01.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product A</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-12 col-sm-3 col-md-2">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="/img/product_02.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product B</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-12 col-sm-3 col-md-2">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_03.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product C</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-important price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-12 col-sm-3 col-md-2">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_04.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product D</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-12 col-sm-3 col-md-2">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_05.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product E</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-12 col-sm-3 col-md-2">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_06.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product F</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-important price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="row tab-pane" id="tab2">
                    <ul class="thumbnails product-list-inline-small">
                        <li class="col-xs-3">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_01.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product A</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-3">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_02.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product B</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-3">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_03.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product C</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-important price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                        <li class="col-xs-3">
                            <div class="thumbnail">
                                <a href="detail.html"><img src="img/product_04.jpg" alt=""></a>
                                <div class="caption">
                                    <a href="detail.html">Product D</a>
                                    <p>Lorem ipsum dolor sit amet <span class="label label-info price pull-right">&euro; 123,-</span></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END CONTENT ITEM -->

    </div>
</div>

<div class="row-fluid">
    <div class="span12 well well-small">

        <!-- START CONTENT ITEM -->
        &copy; <script>document.write(new Date().getFullYear());</script> - All taxes are excluded - shipping costs depends on location - <a href="column3.html">more info <i class="icon-chevron-right"></i></a>
        <!-- END CONTENT ITEM -->

    </div>
</div>

<ul id='myTabs' class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#description">商品介绍</a></li>
    <li role="presentation"><a href="#review">商品评价</a></li>
    <li role="presentation"><a href="#saleservice">售后保障</a></li>
</ul>
<div class="tab-content" style="height: 300px;">
    <div role="tabpanel" class="tab-pane active" id="description">暂无介绍</div>
    <div role="tabpanel" class="tab-pane" id="review">暂无评价</div>
    <div role="tabpanel" class="tab-pane" id="saleservice">终身维修</div>
</div>
@endsection